<template>
  <el-form
    ref="formLogin"
    :model="perfertData"
    :rules="LoginRules"
    class="login-form"
    label-position="top"
    label-width="120px"
    size="large"
  >
    <el-row style="margin-right: -10px; margin-left: 28%">
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="enterpriseName">
          <el-input
            v-model="perfertData.enterpriseName"
            placeholder="请输入企业名称"
            :prefix-icon="iconHouse"
            link
            type="primary"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="creditCode">
          <el-input
            v-model="perfertData.creditCode"
            :placeholder="'请输入统一社会信用代码'"
            :prefix-icon="iconCode"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="legalPerson">
          <el-input
            v-model="perfertData.legalPerson"
            :placeholder="'请输入企业法人'"
            :prefix-icon="iconPer"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="registeredCapital">
          <el-input
            v-model="perfertData.registeredCapital"
            :placeholder="'请输入注册资本'"
            :prefix-icon="iconLock"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="registeredAddr">
          <el-input
            v-model="perfertData.registeredAddr"
            :placeholder="'请输入注册地址'"
            :prefix-icon="iconAddr"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="accountCorporate">
          <el-input
            v-model="perfertData.accountCorporate"
            :placeholder="'请输入对公账号'"
            :prefix-icon="iconAvatar"
          />
        </el-form-item>
      </el-col>
      <el-col :span="15" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="BankOpening">
          <el-input
            v-model="perfertData.BankOpening"
            :placeholder="'请输入开户银行'"
            :prefix-icon="iconBank"
          />
        </el-form-item>
      </el-col>
      <el-col :span="13" style="padding-right: 10px; padding-left: 60px">
        <el-form-item>
          <XButton
            :loading="loginLoading"
            :title="'确认'"
            class="w-[100%]"
            type="primary"
            @click="handleLogin"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import type { RouteLocationNormalizedLoaded } from 'vue-router'

import { useIcon } from '@/hooks/web/useIcon'
import { useFormValid } from './useLogin'

defineOptions({ name: 'LoginForm' })

// const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const iconBank = useIcon({ icon: 'fa:bank' })
const iconCode = useIcon({ icon: 'fa:code' })
const iconAddr = useIcon({ icon: 'fa:address-book' })
const iconPer = useIcon({ icon: 'fa-solid:person-booth' })
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const { currentRoute, push } = useRouter()
const redirect = ref<string>('')
const loginLoading = ref(false)

const LoginRules = {
  // tenantName: [required],
  username: [required],
  password: [required],
  code: [required]
}
const perfertData = reactive({
    // 企业名称
    enterpriseName: '芋道源码',
    // 统一社会信用代码
    creditCode: '',
    // 企业法人
    legalPerson: '',
    // 注册资本
    registeredCapital: '',
    // 注册地址
    registeredAddr: '',
    // 对公账号
    accountCorporate: '',
    // 开户银行
    BankOpening: '',
})

// const loading = ref() // ElLoading.service 返回的实例
// 登录
const handleLogin = async () => {
  // 假数据定向道资料完善页面
    push({ path: '/idRegist' })
    return
  loginLoading.value = true
  try {
    // await getTenantId()
    const data = await validForm()
    if (!data) {
      return
    }
  } finally {
  }
}

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)
onMounted(() => {
})
</script>

<style lang="scss" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}

.login-code {
  float: right;
  width: 33%;
  height: 38px;

  img {
    width: 100%;
    height: auto;
    max-width: 100px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
